forum

home / developersection / forums / draw line between div by click on div...

Ask Question

Draw line between div by click on div...

Milind narkhede 4096 25-Feb-2015
Draw line between div by click on div...

If i click the image the moon and next image star draw line b/w them.and next i click orbitalradius them draw start to orbitalradius line..
javascript javascript 
Updated on 27-Feb-2015
Milind narkhede

Other

Follow
Can you answer this question?
Answer

6 Answers

Anonymous User

Anonymous User

27-Feb-2015
Hi Milind
can you tell me
Are you using JQuery file?
because my sample is running without any errors.

you can check here : Demo
Milind narkhede

Milind narkhede

26-Feb-2015
Hi, Kamlakar Singh

I am Waiting for your reply please solve the problem....
Milind narkhede

Milind narkhede

26-Feb-2015
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style>

    img {

        padding: 1px;

        margin: 2px;

        float: left;

        background-color: #99BC99

    }

    img.selected {

        padding: 2px;

        margin: 4px;       

        background-color: #E13300

    }

</style>
<script type="text/javascript">

    $(document).ready(function () {
       
        $('img').click(function () {
          
            var $elem1 = $(this).parent();

            var $elem2 = $('span.last');

            $(this).toggleClass('selected');

            if ($elem2.length > 0) {

                connect($elem1[0], $elem2[0], "#0F0", 5);

            } else { $elem1.addClass('last'); }

            $('span').removeClass('last');

            $elem1.addClass('last');

        });

    });

    function connect(div1, div2, color, thickness) {
        
        var off1 = getOffset(div1);

        var off2 = getOffset(div2);

        // bottom right

        var x1 = off1.left + off1.width;

        var y1 = off1.top + off1.height;

        // top right

        var x2 = off2.left + off2.width;

        var y2 = off2.top;

        // distance

        var length = Math.sqrt(((x2 - x1) * (x2 - x1)) + ((y2 - y1) * (y2 - y1)));

        // center

        var cx = ((x1 + x2) / 2) - (length / 2);

        var cy = ((y1 + y2) / 2) - (thickness / 2);

        // angle

        var angle = Math.atan2((y1 - y2), (x1 - x2)) * (180 / Math.PI);

        // make hr

        var htmlLine = "<div style='padding:0px; margin:0px; height:" + thickness + "px; background-color:" + color + "; line-height:1px; position:absolute; left:" + cx + "px; top:" + cy + "px; width:" + length + "px; -moz-transform:rotate(" + angle + "deg); -webkit-transform:rotate(" + angle + "deg); -o-transform:rotate(" + angle + "deg); -ms-transform:rotate(" + angle + "deg); transform:rotate(" + angle + "deg);' />";

        //

        //document.body.innerHTML += htmlLine;

        $('body').append($(htmlLine));

    }

    function getOffset(el) {

        var _x = 0;

        var _y = 0;

        var _w = el.offsetWidth | 0;

        var _h = el.offsetHeight | 0;

        while (el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {

            _x += el.offsetLeft - el.scrollLeft;

            _y += el.offsetTop - el.scrollTop;

            el = el.offsetParent;

        }

        return { top: _y, left: _x, width: _w, height: _h };

    }

    window.testIt = function () {

        var div1 = document.getElementById('div1')

        var div2 = document.getElementById('div2')

        connect(div1, div2, "#0F0", 5);

    }

</script>
</head>
<body>

<span style="position: absolute; left: 933px; top: 211px;">
   
       <a id="div1" href=""> <img src="../Linedraw/HTML/images/the_moon_bg.png" alt="" width="35" height="35" /></a></span>

    <span style="position: absolute; left: 304px; top: 190px;">

         <a id="div2"  href=""> <img src="../Linedraw/HTML/images/the_moon_bg.png" alt="" width="35" height="35" /></a></span>

    <span style="position: absolute; left: 756px; top: 264px;">

        <img src="../Linedraw/HTML/images/the_moon_bg.png" alt="" width="35" height="35" id="div3" /></span>

    <span style="position: absolute; left: 365px; top: 395px;">

        <img src="~/Content/untitled.png" alt="" width="35" height="35" id="div4" /></span>

    <span style="position: absolute; left: 129px; top: 302px;">

        <img src="~/Content/untitled.png" alt="" width="35" height="35" id="div5" /></span>

    <span style="position: absolute; left: 504px; top: 261px;">

        <img src="~/Content/untitled.png" alt="" width="35" height="35" id="div6" /></span>

    <span style="position: absolute; left: 650px; top: 393px;">

        <img src="~/Content/untitled.png" alt="" width="35" height="35" id="div7" /></span>

    <span style="position: absolute; left: 283px; top: 26px;">

        <img src="~/Content/untitled.png" alt="" width="35" height="35" id="div8" /></span>

    <span style="position: absolute; left: 593px; top: 35px;">

        <img src="~/Content/untitled.png" alt="" width="35" height="35" id="div9" /></span>

    <span style="position: absolute; left: 784px; top: 42px;">
<img src="~/Content/untitled.png" alt="" width="35" height="35" id="div10" /></span>

</body>
</html>

John Smith

John Smith

26-Feb-2015
Milind can you upload or paste your code here?
Milind narkhede

Milind narkhede

26-Feb-2015
Your code is not running......

i have checked on http://jsfiddle.net/tg9vawgs/

please reply me......
Anonymous User

Anonymous User

26-Feb-2015

Hi Milind you can try this code

CSS:

<style>
    img {
        padding: 1px;
        margin: 2px;
        float: left;
        background-color: #99BC99
    }
    img.selected {
        padding: 2px;
        margin: 4px;        
        background-color: #E13300
    }
</style>

HTML:

<span style="position: absolute; left: 933px; top: 211px;">
        <img src="~/Content/untitled.png" alt="" width="35" height="35" id="div1" /></span>
    <span style="position: absolute; left: 304px; top: 190px;">
        <img src="~/Content/untitled.png" alt="" width="35" height="35" id="div2" /></span>
    <span style="position: absolute; left: 756px; top: 264px;">
        <img src="~/Content/untitled.png" alt="" width="35" height="35" id="div3" /></span>
    <span style="position: absolute; left: 365px; top: 395px;">
        <img src="~/Content/untitled.png" alt="" width="35" height="35" id="div4" /></span>
    <span style="position: absolute; left: 129px; top: 302px;">
        <img src="~/Content/untitled.png" alt="" width="35" height="35" id="div5" /></span>
    <span style="position: absolute; left: 504px; top: 261px;">
        <img src="~/Content/untitled.png" alt="" width="35" height="35" id="div6" /></span>
    <span style="position: absolute; left: 650px; top: 393px;">
        <img src="~/Content/untitled.png" alt="" width="35" height="35" id="div7" /></span>
    <span style="position: absolute; left: 283px; top: 26px;">
        <img src="~/Content/untitled.png" alt="" width="35" height="35" id="div8" /></span>
    <span style="position: absolute; left: 593px; top: 35px;">
        <img src="~/Content/untitled.png" alt="" width="35" height="35" id="div9" /></span>
    <span style="position: absolute; left: 784px; top: 42px;">
<img src="~/Content/untitled.png" alt="" width="35" height="35" id="div10" /></span>

Javascript:

<script>
    $(document).ready(function () {
        $('img').click(function () {
            var $elem1 = $(this).parent();
            var $elem2 = $('span.last');
            $(this).toggleClass('selected');
            if ($elem2.length > 0) {
                connect($elem1[0], $elem2[0], "#0F0", 5);
            } else { $elem1.addClass('last'); }
            $('span').removeClass('last');
            $elem1.addClass('last');
        });
    });
    function connect(div1, div2, color, thickness) {
        var off1 = getOffset(div1);
        var off2 = getOffset(div2);
        // bottom right
        var x1 = off1.left + off1.width;
        var y1 = off1.top + off1.height;
        // top right
        var x2 = off2.left + off2.width;
        var y2 = off2.top;
        // distance
        var length = Math.sqrt(((x2 - x1) * (x2 - x1)) + ((y2 - y1) * (y2 - y1)));
        // center
        var cx = ((x1 + x2) / 2) - (length / 2);
        var cy = ((y1 + y2) / 2) - (thickness / 2);
        // angle
        var angle = Math.atan2((y1 - y2), (x1 - x2)) * (180 / Math.PI);
        // make hr
        var htmlLine = "<div
style='padding:0px; margin:0px; height:" + thickness + "px; background-color:" + color + "; line-height:1px; position:absolute; left:" + cx + "px; top:" + cy + "px; width:" + length + "px;
-moz-transform:rotate(" + angle + "deg); -webkit-transform:rotate(" + angle + "deg); -o-transform:rotate(" + angle + "deg); -ms-transform:rotate(" + angle + "deg); transform:rotate(" + angle + "deg);' />";
        //
        //document.body.innerHTML
+= htmlLine; 
        $('body').append($(htmlLine));
    }
    function getOffset(el) {
        var _x = 0;
        var _y = 0;
        var _w = el.offsetWidth | 0;
        var _h = el.offsetHeight | 0;
        while (el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {
            _x += el.offsetLeft -
el.scrollLeft;
            _y += el.offsetTop - el.scrollTop;
            el = el.offsetParent;
        }
        return { top: _y, left: _x, width: _w, height: _h };
    }
    window.testIt = function () {
        var div1 = document.getElementById('div1')
        var div2 = document.getElementById('div2')
        connect(div1, div2, "#0F0", 5);
    }
</script>

Output:

Draw line between div by click on div...

MindStick Training
MindStick Training

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy